<template>
  <ul class="category-list">
    <li
      v-for="(item, index) in list"
      :key="index"
      class="list-item"
    >
      <div class="item" @click="$router.push(`/product/detail/${item.id}`)">
        <div class="image">
          <img v-lazy="item.mainImage.thumbnail_path" v-if="item.mainImage && item.mainImage.thumbnail_path" />
        </div>
        <div class="name text-hide">{{ item.title }}</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryList',
  props: ['list']
}
</script>

<style scoped lang="stylus">
.category-list
  padding 5px
  display flex
  flex-wrap wrap
  width 100%
  .list-item
    width 33.33%
    box-sizing border-box
    .item
      display flex
      flex-direction column
      justify-content space-between
      min-height 120px
      .image
        padding 10px
        flex 1
        //background red
      .name
        height 20px
        line-height 20px
        font-size 14px
        font-weight 700
</style>
